import React from 'react'
import {Routes,Route} from 'react-router-dom'
/*
    路由配置具体的步骤
    1.下载react-router-dom
    2.导入BrowserRouter
    3.在index.js项目的入口文件中，使用BrowserRouter将App跟组件包裹起来 
    4.在根组件中使用Routes进行路由出口的设置
    5.在Route配置路由关系，常见属性有两个
    path:请求的路径 element:指定组件
 */
import Login from './pages/Login'
import Register from './pages/Register'
import Home from './pages/Home'
import UserList from './pages/UserList'
import CategoryList from './pages/CategoryList'
import RoleList from './pages/RoleList'
import ProductList from './pages/ProductList'
import Main from './pages/Main'
import NotFound from './pages/NotFound'
export default function App() {
  return (
    <Routes>
       <Route path='/login' element={<Login/>}></Route>
       <Route path='/register' element={<Register/>}></Route>
       <Route path='/' element={<Home/>}>
         {/* 使用index代替path属性，这个路由就是默认的路由 */}
         <Route index element={<Main></Main>}></Route>
         <Route path='userList' element={<UserList/>}></Route>
         <Route path='categoryList' element={<CategoryList/>}></Route>
         <Route path='roleList' element={<RoleList/>}></Route>
         <Route path='productList' element={<ProductList/>}></Route>
       </Route>
       <Route path='*' element={<NotFound></NotFound>}></Route>
    </Routes>
  )
}
